<style>
    .orgchart .data .title {
        background-color: dodgerblue;
    }
    .orgchart .data .content {
        border-color: dodgerblue;
    }
    .orgchart .top-level .title {
        background-color: #006699;
    }
    .orgchart .top-level .content {
        border-color: #006699;
    }
    .orgchart .middle-level .title {
        background-color: #009933;
    }
    .orgchart .middle-level .content {
        border-color: #009933;
    }
    .orgchart .bottom-level .title {
        background-color: #993366;
    }
    .orgchart .bottom-level .content {
        border-color: #993366;
    }
    .orgchart .bottom2 .title {
        background-color: coral;
    }
    .orgchart .bottom2 .content {
        border-color: coral;
    }
</style>
<template>
    <div>
        <Menu style="margin-bottom: 20px" mode="horizontal" :theme="theme1" active-name="1" @on-select="selectMenu">
            <MenuItem name="1">
                科目
            </MenuItem>
            <MenuItem name="2">
                模板
            </MenuItem>
            <MenuItem name="4">
                人员
            </MenuItem>
            <MenuItem name="6">
                实物设备
            </MenuItem>
            <MenuItem name="7">
                导调
            </MenuItem>
            <MenuItem name="8">
                临机导调
            </MenuItem>
        </Menu>
        <!--科目-->
        <Table v-show="subShow" :columns="subCol" :data="row.subject?row.subject:[]"></Table>
        <!--模板-->
        <Table v-show="tempShow" :columns="tempCol" :data="row.template?row.template:[]"></Table>
        <div v-show="peopleShow">
            <Table :columns="memberCol" :data="row.members?row.members:[]"></Table>
        </div>
        <Table v-show="equiShow" :columns="equiCol" :data="row.equipments?row.equipments:[]"></Table>
        <!--导调-->
        <Table v-show="flowShow" :columns="flowCol" :data="row.flow?row.flow:[]"></Table>
        <!--临机导调-->
        <Table v-show="adjustmentShow" :columns="adjustmentCol" :data="row.adjustment?row.adjustment:[]"></Table>
        <Modal
                v-model="weapoListModel"
                width="1000"
                :mask-closable="false"
                title="工具列表"
                footer-hide>
            <div style="max-height: 700px;overflow: auto">
                <Table :columns="collCol" :data="weapoList"></Table>
            </div>
        </Modal>
    </div>
</template>
<script>
    import $ from 'jquery'
    import orgchart from '../../../static/js/orgchart.js'
    import '../../../static/css/orgchart.css'
    import collRow from '../collRow/collRow.vue'
    export default {
        props: {
            row: Object
        },
        data(){
            return{
                // 菜单背景色
                theme1:'light',
                // 获取训练详情
                trainData:{},
                // 表格
                subShow:true,
                tempShow:false,
                peopleShow:false,
                equiShow:false,
                flowShow:false,
                adjustmentShow:false,
                // 科目
                subCol:[
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        key: 'subject_id',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '名称',
                        key: 'name',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '描述',
                        key: 'description',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '更新时间',
                        key: 'updateTime',
                        ellipsis:true,
                        tooltip:true,
                    },
                ],
                // 工程模板
                tempCol:[
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        key: 'id',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '名称',
                        key: 'name',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '工程ID',
                        key: 'projectId',
                        ellipsis:true,
                        tooltip:true,
                    },
                ],
                // 实物设备
                equiCol:[
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        key: 'id',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '名称',
                        key: 'name',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '用户名',
                        key: 'userName',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '单位名称',
                        key: 'companyName',
                        ellipsis:true,
                        tooltip:true,
                    },
                ],
                // 导调
                flowCol:[
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '名称',
                        key: 'name',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: 'ID',
                        key: 'id',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '状态',
                        key: 'status',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '创建者',
                        key: 'creatorName',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '描述',
                        key: 'description',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '创建时间',
                        key: 'created',
                        ellipsis:true,
                        tooltip:true,
                    },
                ],
                // 临机导调
                adjustment:[],
                adjustmentCol:[
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '导调ID',
                        key: 'id',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '任务ID',
                        key: 'trial_id',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '类型',
                        key: 'type',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '导调状态',
                        key: 'status',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '描述',
                        key: 'description',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '导调时间',
                        key: 'time',
                        ellipsis:true,
                        tooltip:true,
                    },
                ],
                // 新人员列表
                memberCol:[
                    {
                        title: '用户名',
                        key: 'username',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '类型',
                        key: 'type',
                        ellipsis:true,
                        tooltip:true,
                        render:(h,params)=>{
                            let text = ''
                            if(params.row.type === 'designer'){
                                if(params.row.role === 'evaluator'){
                                    text = '评估人员'
                                }
								if(params.row.role === 'leader'){
                                    text = '单位管理员'
                                }if(params.row.role === 'member'){
                                    text = '单位设计师'
                                }
                            }else if(params.row.type === 'experimenter'){
                                text = '操作员'
                            }
                            return h('div',text);
                        }
                    },
                    {
                        title: '所属组',
                        key: 'group_name',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '所属组ID',
                        key: 'group',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title: '工具列表',
                        key: 'weapons',
                        render:(h,params)=>{
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size:'small',
                                    },
                                    on: {
                                        click: () => {
                                            this.checkWeaponBtn(params.row.weapons)
                                        }
                                    }
                                }, '查看')
                            ]);
                        }
                    },
                ],
                // 采集点对象
                collObj:{},
                weapoListModel:false,
                weapoList:[],
                collCol:[
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return h(collRow, {
                                props: {
                                    row: params.row.collArr,
                                }
                            })
                        }
                    },
                    {
                        title:'ID',
                        key:'id',
                        ellipsis:true,
                        tooltip:true,
                    },
                    {
                        title:'名称',
                        key:'name',
                        ellipsis:true,
                        tooltip:true,
                    },
                ],
            }
        },
        created(){
            // this.collectPoint()
            this.collObj = JSON.parse(localStorage.getItem('desi-coll-point'))
        },
        mounted(){

        },
        methods:{
            // menu菜单
            selectMenu(name){
                this.subShow = false
                this.tempShow = false
                this.peopleShow = false
                this.equiShow = false
                this.flowShow = false
                this.adjustmentShow = false
                if(name === '1'){
                    this.subShow = true
                }else if(name === '2'){
                    this.tempShow = true
                }else if(name === '4'){
                    this.peopleShow = true
                }else if(name === '6'){
                    this.equiShow = true
                }else if(name === '7'){
                    this.flowShow = true
                }else if(name === '8'){
                    this.adjustmentShow = true
                }
            },
            // 采集点数据
            collectPoint(){
                // 采集点id列表
                let testData = [1001, 2004,2005,2006,2007,3008,3009,3010,3011,3000,3001,3012, 3013, 3014, 4009,4010,4011,4008]
                $.ajax({
                    async : true,
                    url: '/tpi/butp/index/all/detail',
                    type: 'GET',
                    contentType:'application/json;charset=utf-8',
                    data : {},
                    success: (res)=>{
                        if(res.flag){
                            let json = res.data
                            // 数据源
                            let NODES = json.nodes;
                            let EDGES = json.edges;
                            let saveObj = {}
                            let DATA = {
                                name:'数据',
                                NC:'',
                                className:'data',
                                children:[],
                            }
                            // 整理数据
                            let Arrangement = {}
                            let collPointArr = this.row.evaluation?this.row.evaluation:[]
                            for(let i=0;i<NODES.length;i++){
                                // if(NODES[i].id < 1000){
                                //     NODES[i].children = []
                                //     NODES[i].className = 'top-level'
                                // }else if(NODES[i].id >= 1000 && NODES[i].id < 2000){
                                //     NODES[i].children = []
                                //     NODES[i].className = 'middle-level'
                                // }else if(NODES[i].id >= 2000 && NODES[i].id < 3000){
                                //     NODES[i].children = []
                                //     NODES[i].className = 'bottom-level'
                                // }else if(NODES[i].id >= 3000 && NODES[i].id < 4000){
                                //     NODES[i].className = 'bottom2'
                                //     NODES[i].children = []
                                // }else if(NODES[i].id > 4000){
                                //     NODES[i].children = []
                                // }
                                // NODES[i]['NC'] = NODES[i]['level']  // 此处是因为数据中的level字段和插件的level功能冲突，所以定义NC接收一下
                                Arrangement[NODES[i].id] = NODES[i]
                            }
                            this.collObj = Arrangement
                        }else {
                            this.$Message.error({
                                content:'数据获取失败！',
                                duration:3
                            })
                        }
                    },
                    error:(err)=>{
                        console.log(err)
                    }
                })
            },
            // 查看武器列表
            checkWeaponBtn(val){
                this.weapoList = []
                console.log(val)
                for(let i=0;i<val.length;i++){
                    let objData = {
                        collArr:[],
                        id:val[i].weapon_id,
                        name:val[i].weapon_name,
                    }
                    // this.getSingalData(val[i].weapon_id,val[i].evaluation)
                    // this.getSingalData(val[i].weapon_id)
                    let idArr = val[i].evaluation
                    let arr = []
                    for(let j=0;j<idArr.length;j++){
                        let collId = idArr[j]
                        if(this.collObj[collId]){
                            arr.push(this.collObj[collId])
                        }
                    }
                    objData.collArr = arr
                    this.weapoList.push(objData)
                    console.log(this.weapoList)
                }
                this.weapoListModel = true
            },
            // 查询所有武器工具信息
            getSingalData(id,arr){
                this.axios.post(`${this.baseURL}/oad/tool/list?page=1&size=10`,JSON.stringify({id:id}),{
                    headers:{'Content-Type': 'application/json'}
                })
                    .then((res)=>{
                        if(res.data.code == 1){
                            let getlist = res.data.data.list
                            if(getlist.length > 0){
                                let obj = getlist[0]
                                obj.collArr = arr
                                this.weapoList.push(obj)
                            }
                        }
                    })
                    .catch((err)=>{
                        console.log(err)
                    })
            },
        }
    };
</script>
